<template>
   <div class="search flex flex-wrap">
      <div v-for="item in searchArguments" :key="item.id" :class="item.class">
        <p v-if="item.type === 'input'">
          <el-input
          v-model="searchParams[item.name]"
          :placeholder="item.placeholder"
          :size="item.size ? item.size : 'mini'">
        </el-input>
        </p>
        <p v-else-if="item.type === 'picker'">
          <el-date-picker
            v-model="searchParams[item.name]"
            :size="item.size ? item.size : 'mini'"
            type="daterange"
            align="right"
            unlink-panels
            range-separator=":"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            >
          </el-date-picker>
        </p>
        <p v-else-if="item.type === 'select'">
          <el-select v-model="searchParams[item.name]" :placeholder="item.placeholder" :size="item.size ? item.size : 'mini'">
            <el-option
              v-for="opt in item.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value">
            </el-option>
          </el-select>
        </p>
      </div>
      <p>
        <!-- <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button type="primary" size="mini" @click="reset">重置</el-button> -->
        <bdButton :handlerBtn="searchBtn.length ? searchBtn : defaultBtn"></bdButton>
      </p>
    </div>
</template>

<script>
import bdButton from '../bdButton/index.vue'
export default {
  name: 'bdSearch',
  components: {
    bdButton
  },
  // 定义内容
  props: {
    searchArguments: {
      type: Array,
      required: true
    },
    searchBtn: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, start])
            }
          },
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      searchParams: {},
      oldSearchParams: {},
      defaultBtn: [
        {
          id: 1,
          name: '搜索',
          handler: this.search
        },
        {
          id: 2,
          name: '重置',
          handler: this.reset
        }
      ]
    }
  },
  // 计算属性
  computed: {
    // searchParams () {
    //   return this.searchArguments.reduce((prev, curr) => {
    //     return { ...prev, [curr.name]: curr.value }
    //   }, {})
    //   // 拷贝 存储旧的数据
    //   this.oldSearchParams = JSON.parse(JSON.stringify(this.searchArguments))
    // }
  },
  watch: {},
  mounted () {
    // console.log(this.searchBtn)
    // this.defaultBtn = this.searchBtn
    this.searchParams = this.searchArguments.reduce((prev, curr) => {
      return { ...prev, [curr.name]: curr.value }
    }, {})
    // 拷贝 存储旧的数据
    this.oldSearchParams = Object.assign({}, this.searchParams)

    // 按钮组件增加事件
    // console.log(this.searchBtn)
    this.searchBtn.forEach(item => {
      item.handler = this[item.handler]
    })
  },
  methods: {
    search () {
      // 得到三个对象，把三个对象放到一个对象里边
      // 第一种方法
      // const items = this.searchArguments.map(item => ([item.name, item.value]))
      // console.log(Object.fromEntries(items))

      // 第二种方法
      // const items = this.searchArguments.map(item => ({ [item.name]: item.value }))
      // const b = Object.assign({}, ...items)
      // console.log(b)

      // 第三种方法
      // const obj = this.searchArguments.reduce((prev, curr) => {
      //   return { ...prev, [curr.name]: curr.value }
      // }, {})
      // console.log(obj)
      this.$emit('search', this.searchParams)
    },
    reset () {
      this.searchParams = Object.assign({}, this.oldSearchParams)
      this.$emit('reset', this.searchParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.search p {
  margin-right: 5px;
  margin-bottom: 5px;
}
.el-date-editor--daterange.el-input__inner {
  width: 100%;
}
</style>
